<template>
    <!-- 图标按钮组件 -->
    <button @click="handleClick">
        <!-- 嵌入内容 -->
        <slot></slot>
    </button>
</template>

<script lang="ts" setup>
// 声明点击事件
const emit=defineEmits<{
    (event:'click'):void
}>();
// 点击事件回调函数
function handleClick():void{
    emit('click');
}
</script>

<style lang="scss" scoped>
$text-height:6.25vw;
@import '../../styles/textLayout.scss';
/* 按钮样式 */
button{
    @extend %text-layout;
    font-size:calc($text-height*0.9);
    width:$text-height;
    padding:0;
    border-radius:50%;
    background-color:green;
    color:white;
}
</style>
